<template>
  <div class="Canvas">
    <div class="render" :ref="drop">
      <Widget :schema = "i" :key = "k" v-for="(i, k) in schemas"></Widget>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import Widget from "@/components/widgets/index.vue";
  import { useDrop } from "vue3-dnd";
  import { useLowCodeStore } from "@/stores";
  import { getWidgetAccept } from "@/modle";


  const stores = useLowCodeStore();
  const schemas = computed(() => stores.schemas.filter(t=>t.parentId === 'canvas'));

  const [collect, drop] = useDrop(() => ({
    accept: getWidgetAccept('canvas'),
    drop: (item, monitor)=>{
      const didDrop = monitor.didDrop();
      if (didDrop) return;
      console.log(monitor)
    },
    collect: monitor => ({
      isOver: monitor.isOver(),
      isOverCurrent: monitor.isOver({ shallow: true }),
    }),
  }))
</script>

<style scoped lang="less">
  .Canvas {
    flex: 1;
    height: 100%;
    border: 1px solid #000;
    overflow-y: auto;
    .render {
      width: 100%;
      min-height: 100%;
      margin: auto;
      background-color: #f1f2f5;
    }
  }
  .Canvas::-webkit-scrollbar {
    width: 4px;
  }
  .Canvas::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
  }
  .Canvas::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }
</style>
